<style lang="scss" scoped>
    .question-list{
        width:85%;
        min-height: 200px;
        .item{
            width: 180px;
            overflow: hidden;
            height: 86px;
            .head{
                // background-color: $primary-color;
                color: #fff;
                line-height: 36px;
                height: 36px;
                padding:0 6px;
                i{
                    line-height: 36px;
                }
            }
            p{
                padding:6px;
                margin:0;
                line-height: 20px;
            }
        }
    }
</style>
<template>
    <div class="create_lesson pb-2">
        <Form :model="fm" :label-width="80" class="bg-fff p-1 border-radius">
            <FormItem label="课堂主题">
                <Input v-model="fm.title" class="w-300" placeholder="请输入课堂主题"></Input>
            </FormItem>
            <FormItem label="课堂简介">
                <editor v-if="fm.id" :html="fm.content" @changeEdit="changeEdit" style="width:90%;height:400px"/>
            </FormItem>
            <FormItem label="客观题">
                <ButtonGroup>
                    <Button @click="questionModalType=1;openDialog=true">判断题</Button>
                    <Button @click="questionModalType=2;openDialog=true">填空/计算题</Button>
                    <Button @click="questionModalType=3;openDialog=true">单选/多选题</Button>
                </ButtonGroup>
            </FormItem>
            <FormItem label="主观题">
                <Button @click="questionModalType=4;openDialog=true">论述题</Button>
            </FormItem>
            <FormItem label="考题列表" v-show="questionList.length">
                <div class="question-list border p-1 border-radius d-flex wrap">
                    <div class="item border border-radius mr-1 mb-1" v-for="(val,index) in questionList" :key="index">
                        <div class="d-flex between head" :class="'background-t'+val.type">
                            <h4>{{`NO${index+1}.${questionName[val.type-1]}(${ val.type===4?val.answer.split(',').length*val.score: val.score}分)`}}</h4>
                            <Icon type="md-close" size="16" class="pointer" @click="delAuestion(index)"/>
                        </div>
                        <p class="substr-line-more font-12">{{val.title}}</p>
                    </div>
                </div>
            </FormItem>
            <FormItem label="终极课程">
                <i-switch v-model="fm.is_last" size="large" class="mr-2" :false-value="0" :true-value="1">
                    <span slot="open">是</span>
                    <span slot="close">否</span>
                </i-switch>
                <span class="font-12 color-999">是否是最后一堂课，终极课程的评价系统有别的普通课程</span>
            </FormItem>
            <FormItem label="附件列表">
                <upload-button v-if="fm.id" :file_list="fm.file_list" @set_files="set_files"/>
            </FormItem>
            <FormItem>
                <Button @click="submit" type="primary" size="large" class="mr-1" :disabled="!!totalScore && totalScore!==100">提交</Button>
                <!-- <Button size="large">清空</Button> -->
                <p class="color-red" v-if="totalScore && totalScore!==100">当前题库累计分值为 {{totalScore}}，请调整至100方能提交</p>
            </FormItem>
        </Form>
        <create-question-modal :questionName="questionName" :type="questionModalType" :openDialog="openDialog" @add="addAuestion" @close="questionModalType=-1;openDialog=false"/>

    </div>
</template>

<script>
import editor from "@/components/editor"
import createQuestionModal from "@/components/createQuestionModal"
import uploadButton from "@/components/uploadButton"
import {lesson_edit,lesson_view} from '@/common/tapi'

export default {
    data(){
        return {
            questionName:['判断题','填空/计算题','选择题','论述题'],
            fm:{
                title:'',
                content:'',
                is_last:0,
                exam_questions:[],
                files:'',
                file_list:[]
            },
            questionList:[],
            questionModalType:-1,
            openDialog:false
        }
    },
    methods:{
        set_files(listStr){
            this.fm.files=listStr
        },
        delAuestion(index){
            this.questionList.splice(index,1)
        },
        addAuestion(data){
            this.questionList.push(data)
        },
        changeEdit(data){
            this.fm.content=data
        },
        submit(){
            this.questionList.forEach(el=>{
                delete el.file_list
                delete el.next_id
                delete el.before_id
                if(!el.id)
                    el.id=0
            })
            this.fm.exam_questions=JSON.stringify(this.questionList)
            lesson_edit(this.fm)
            .then(res=>{
                if(res){
                    this.$Notice.success({
                        title: '提交成功',
                        desc: '课程编辑成功'
                    });
                    this.$router.push('my_lesson')
                }
            })
        }
    },
    computed:{
        totalScore(){
            return this.questionList.reduce((prev,cur)=>{
                if(cur.type!==4)
                    return prev+cur.score
                else{
                    return cur.answer.split(',').length*cur.score+prev
                }
            },0)
        }
    },
    components:{
        editor,
        createQuestionModal,
        uploadButton
    },
    created(){
        lesson_view({
            lid:this.$route.query.lid
        })
        .then(res=>{
            if(res){
                this.fm=res.data.lesson
                this.questionList=res.data.question
            }
        })
    }
}
</script>